<template>
    <!-- col-11 -->
    <div class="row">
        <div class="col-1 d-flex justify-content-end">
            <strong>网页翻译</strong>
        </div>
        <div class="col-3  d-flex justify-content-start">
            <input class="form-check-input" type="checkbox" name="enableTrans" id="enableTrans"
            v-model="labConsole.pageTran.enableTrans"
            @change="LabClickToSave({pageTran:{enableTrans:labConsole.pageTran.enableTrans}})">
            <label class="form-check-label" for="enableTrans">
                启动翻译功能
            </label>
        </div>
    </div>

    <div class="row mt-5">
        <div class="col-1 d-flex justify-content-end">
            <strong>状态栏及其他</strong>
        </div>
        <div class="col-3  d-flex justify-content-start">
            <input class="form-check-input" type="checkbox" name="enableHotNews" id="enableHotNews"
            v-model="labConsole.statusBar.enableHotNews"
            @change="LabClickToSave({statusBar:{enableHotNews:labConsole.statusBar.enableHotNews}})">
            <label class="form-check-label" for="enableHotNews">
                启动“360”热点资讯功能
            </label>
        </div>
    </div>

    <div class="row mt-3">
        <div class="col-5  offset-1 d-flex justify-content-start">
            <input class="form-check-input" type="checkbox" name="enableNewMessage" id="enableNewMessage"
            v-model="labConsole.statusBar.enableNewMessage"
            @change="LabClickToSave({statusBar:{enableNewMessage:labConsole.statusBar.enableNewMessage}})"
            >
            <label class="form-label" for="enableNewsMes">
                启动“资讯消息”
            </label>
        </div>
    </div>

    <div class="row mt-3">
        <div class="col-5  offset-1 d-flex justify-content-start">
            <input class="form-check-input" type="checkbox" name="autoMessage" id="autoMessage"
            v-model="labConsole.statusBar.autoMessage"
            @change="LabClickToSave({statusBar:{autoMessage:labConsole.statusBar.autoMessage}})">
            <label class="form-label" for="autoMessage">
                智能消息
            </label>
        </div>
    </div>

    <div class="row mt-5">
        <div class="col-1 d-flex justify-content-end">
            <strong>系统</strong>
        </div>
        <div class="col-3  d-flex justify-content-start">
            <input class="form-check-input" type="checkbox" name="tableWinAdv" id="tableWinAdv"
            v-model="labConsole.system.tableWinAdv"
            @change="LabClickToSave({system:{tableWinAdv:labConsole.system.tableWinAdv}})"
            >
            <label class="form-check-label" for="tableWinAdv">
                桌面弹窗广告
            </label>
        </div>
    </div>

    <div class="row mt-3">
        <div class="col-5  offset-1 d-flex justify-content-start">
            <input class="form-check-input" type="checkbox" name="autoHardAcc" id="autoHardAcc"
            v-model="labConsole.system.autoHardAdv"
            @change="LabClickToSave({system:{autoHardAdv:labConsole.system.autoHardAdv}})"
            >
            <label class="form-label" for="autoHardAcc">
                智能开启硬件加速(重启浏览器生效)
            </label>
        </div>
    </div>

</template>

<style>
.IDS_MORE_SETTING_BOOKMARK_MENU_MIN_WIDTH {
    box-sizing: border-box;
    font: inherit;
    padding: 4px;
    color: #444;
    border: 1px solid #e5e5e5;
    width: 50px;
    height: 24px;
}
</style>

<style scoped>
.form-check-input {
    margin-right: 8px;
    /* 在 input 右侧添加 8px 的边距 */
}

.form-input {
    margin-right: 8px;
    /* 在 input 右侧添加 8px 的边距 */
}
</style>


<script setup lang="ts">
import { useLabStore } from '@/store/console/lab'; 
import { showSaveMsg } from '@/utils/message'

import * as labApi from '@/api/console/labConsole'
const labStore = useLabStore()
// const basicConsole = computed(() => basicStore.getBasicConsole)
const { labConsoleState:labConsole } = storeToRefs(labStore)
labApi.getLabConsole().then(
    (res) => labStore.updateLabConsole(res as unknown as LabConsoleApiModel)
);
function LabClickToSave(param: LabConsoleApiModel) {
    labApi.updateLabConsole(param)
    showSaveMsg()
}
</script>



<script lang="ts">
import { defineComponent } from 'vue';
import { storeToRefs } from 'pinia';
import { LabConsoleApiModel } from '@/type/console/labConsole';


export default defineComponent({
    name: 'LabConsole',

});

</script>